<template>
	<view class="page">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<view class="form">
			<u-form labelPosition="left" :model="leasingManager" :rules="rules" labelWidth="auto" ref="uForm">

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">联系电话:</span>
					</template>
					<u-input v-model="leasingManager.phone" border="none" placeholder="请输入电话"></u-input>
				</u-form-item>

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">验证码:</span>
					</template>
					<u-input v-model="leasingManager.code" border="none" placeholder="请输入验证码"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode" size="mine">{{tips}}</u-button>
				</u-form-item>

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">上传身份证:</span>
					</template>

				</u-form-item>
				<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="1" width="250" height="150">

					<div class="identityCard" style="">
						<view class="image1" style="margin:0  20rpx ;">
							<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
								style="width: 150px; height: 200px; border-radius: 10px;" />
							<view class="" style="text-align: center;">
								身份证正面
							</view>
						</view> <!-- 第一个图像 -->
						<view class="image1" style="margin:0  20rpx ;">
							<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
								style="width: 150px; height: 200px; border-radius: 10px;" />
							<view class="" style="text-align: center;">
								身份证反面
							</view>
						</view>

					</div>

				</u-upload>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">姓名:</span>
					</template>
					<u-input v-model="leasingManager.name" border="none" placeholder="请输入姓名"></u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">身份证号码:</span>
					</template>
					<u-input v-model="leasingManager.identityCardNumber" border="none" placeholder="请输入身份证号码"></u-input>
				</u-form-item>

				<u-form-item borderBottom @click="showShop=true">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">代理类型:</span>
					</template>
					<u-input v-model="leasingManager.proxyType" disabled placeholder="请选择代理类型" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">入驻费:</span>
					</template>
					<u-input v-model="leasingManager.price" border="none" placeholder="">元</u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">收款人:</span>
					</template>
					<u-input v-model="leasingManager.collection" border="none" placeholder="请输入收款人"></u-input>

				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">开户银行:</span>
					</template>
					<u-input v-model="leasingManager.bank" border="none" placeholder="请输入开户银行"></u-input>

				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">银行卡号:</span>
					</template>
					<u-input v-model="leasingManager.bankNumber" border="none" placeholder="请输入银行卡号"></u-input>

				</u-form-item>
			</u-form>

			<!-- 协议弹框 -->
			<u-popup :show="show" round="10" mode="center" @close="close" @open="open">
				<view style="margin: 20rpx;">
					<view class="title1" style="text-align: center;">
						区域经理入驻合同
					</view>
					<text>欢迎您使用“周壹淘拍卖商城”小程序及服务! 欢迎使用赤峰周一文化传媒有限公司(以下简称“赤峰周一文化传媒”)“周壹淘拍卖商城”小程序(以下简称“本小程序”) 及服务在此特别提醒您(用户)
						在注册成为用户之前，请认真阅读本《区域代理入驻协议》(以下简称“协议”)，确保您充分理解本协议中各条款请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。区域代理包括；古玩城推广，古玩地摊推广，展会组织者推广，微信群主推广，有独立推广二维码，区域代理下推广二维码入住的商户都有提成500平台盈利2%的利润

						周壹淘平台招商政策: 为了能帮助到您的古玩城+古玩商户+每件艺术品，推向互联网全球展示！
						整合艺术品资源！让每位从事经营古玩艺术品的人！能够公平展示交流交易使用（周壹淘）线上线下一体化这款工具！实现艺术品的数字化转型升级！艺术品繁荣昌盛在此推向高潮！
						每个商户入住费1580元，古玩城管理者500元，平台交易平台服务费为10%再给古玩城管理者2%！联系全国某个古玩城）:
						成功入住70%以上茶水1万元！70%以下入住按每户80元计算！一次性交1580元，在平台交易超过10万元，返给商户1580元，交易20万元，在奖励2000元，（以此类推交易30万元平台奖励3000元）……
						全国古玩地摊市场入住: 联系全国某个地摊市场按每户成功入住80元计算） 每户入住费用580元市场管理者每户按100茶水费已备好平台交易平台服务费10%在给市场管理者2%这样市场管理者持续收益！
						每户在平台交易超过10万元，返给商户580元，交易20万元，在奖励2000元， （以此类推交易30万元平台奖励3000元）……</text>
				</view>
			</u-popup>
			<view class="container">

				<view class="item">
					<u-checkbox v-model="isAgreed"></u-checkbox>
					<view>
						我已阅读
						<text class="text1" @click="show=true">《区域经理入驻协议》</text>，
						并已签署
						<text class="text1" @click="hetong">《区域经理入驻合同》</text>
					</view>
				</view>
				<view class="custom-button" @tap="submit">提交</view>


			</view>

			<u-picker :show="showShop" :columns="collectionLists" @close="close" @confirm="confirm"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showShop: false,
				isAgreed: false, // 用于存储协议是否已阅读
				leasingManager: {
					name: '',
					phone: '',
					code: '',
					identityCardNumber: '',
					price: '0',
					bank: '',
					bankNumber: '',
					proxyType: '',
					collection: '',
				},
				fileList6: [],
				collectionLists: [
					['我是市场管理者', '我是展会组织者', '我是微信群主']
				],
				priceMapping: {
					'我是市场管理者': 10000,
					'我是展会组织者': 5000,
					'我是微信群主': 1000
				},
				rules: {
					name: {
						type: 'string',
						trigger: ['blur', 'change'],
						required: true,
						message: '姓名是必填项'
					},
					proxyType: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '代理类型是必填项'
					},
					phone: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '电话是必填项'
					},
					code: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '验证码是必填项'
					},
					identityCardNumber: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '身份证是必填项'
					},
					price: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '入住费是必填项'
					},
					bank: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '开户银行是必填项'
					},
					bankNumber: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '银行卡号是必填项'
					},
					collection: {
						required: true,
						type: 'string',
						trigger: ['blur', 'change'],
						message: '收款人是必填项'
					},

				},
				seconds: 60, // 用于验证码倒计时
				tips: '获取验证码',
				show: false, // 控制弹框的显示

			};
		},
		methods: {
			afterRead(file) {
				this.fileList6.push(file);
				// 处理上传逻辑
			},
			deletePic(index) {
				this.fileList6.splice(index, 1);
			},
			//协议和合同
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			hetong() {

			},

			getCode() {
				// 获取验证码的逻辑
				console.log('获取验证码');
			},
			end() {
				// 结束倒计时的逻辑
				console.log('倒计时结束');
			},
			start() {
				// 开始倒计时的逻辑
				console.log('倒计时开始');
			},
			codeChange() {
				// 处理验证码变化的逻辑
				console.log('验证码变化');
			},
			submit() {
				if (this.isAgreed) {
					// 提交逻辑
					console.log('协议已阅读，提交成功');
					this.$refs.uToast.show('提交成功');
				} else {
					// 提示用户需阅读协议
					this.$refs.uToast.show('请先阅读统一招商协议');
				}
			},
			//选择代理类型
			close() {
				this.showShop = false; // 关闭选择器
			},
			confirm(selectedItems) {
				// selectedItems 是选中的商品类目
				const selectedProxyType = selectedItems.value; // 获取选中的代理类型
				this.leasingManager.proxyType = selectedProxyType; // 更新输入框的值为选中的商品类目

				// 根据选中的代理类型更新入驻费
				this.leasingManager.price = this.priceMapping[selectedProxyType] || '0'; // 设置入驻费，若未匹配则默认为0

				console.log('选择的代理类型:', selectedProxyType);
				console.log('对应的入驻费:', this.leasingManager.price);
				this.showShop = false; // 关闭选择器
			},
		}
	}
</script>

<style scoped>
	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}


	.container {
		margin-top: auto;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text1 {
		color: #d1a969;
	}

	.identityCard {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.image1 {}

	.container .custom-button {
		width: 96%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #d1a969;
		/* 设置按钮的背景颜色 */
		color: #fff;
		border-radius: 50rpx;
	}
</style>